<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="请输入名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" :data="tableData" height="100%" stripe>
			<el-table-column label="排序" width="50" align="center" prop="orderBy"></el-table-column>
			<el-table-column label="缩略图" width="260" :formatter="bannerImgFormatter"></el-table-column>
			<el-table-column label="名称" prop="name" min-width="320"></el-table-column>
			<el-table-column label="状态" min-width="100" align="center">
				<template slot-scope="{ row }">
					<el-tag size="medium" type="success" v-if="row.isShow === '0'">显示</el-tag>
					<el-tag size="medium" type="warning" v-if="row.isShow === '1'">隐藏</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
			<el-table-column label="操作" width="132">
				<el-button-group slot-scope="{ row }">
					<el-button size="mini" type="warning" @click="handleOpenDialog(row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDeleteData(row)">删除</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()" />
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { queryBannerList, deleteBanner } from '@/api/basedata/sysBanner';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '轮播图'
		};
	},
	computed: {
		listFunction() {
			return eval(queryBannerList);
		},
		deleteFunction() {
			return eval(deleteBanner);
		}
	},
	methods: {
		// 格式化缩略图
		bannerImgFormatter(row) {
			let src = row.file?.httpUrl?.replaceIP() || '';
			let style = { width: '240px', height: '75px', display: 'block' };
			return this.$createElement('elImage', { attrs: { src, previewSrcList: [src] }, style });
		}
	}
};
</script>

<style lang="scss" scoped></style>
